<template>
  <el-container class="construction-form">
    <el-header height="40px" class="header">
	    <el-row type="flex" justify="space-between">
	      <span class="title">建设任务书</span>
	      <div>
	      	<el-button v-show="constructionRecord.jsrwbh && constructionRecord.jsrwbh!='' "
          type="success" size="mini" icon="el-icon-check" @click="onSaveClick">保存</el-button>
	      	<el-button type="warning" size="mini" icon="el-icon-close" @click="onCloseClick">关闭</el-button>
	      </div>
	    </el-row>
	  </el-header>
    <el-main class="main">
      <!-- 建设任务基本信息 -->
      <el-container style="height:100%;" v-if="(constructionRecord.jsrwbh) || constructionRecord.jsrwbh!=='' ">
        <el-header height="40px">
          <h3>请<span style="color:red;">选择</span>一个申报过的项目进行建设</h3>
        </el-header>
        <el-main>
          <simple-panel :panelTitle="'申报过的项目'">
            <template slot="main">
              <el-table :data="declarationData" stripe border size="medium" height="250px" style="width: 100%;"
              highlight-current-row @current-change="onDeclarationChange">
                <template v-for="(col, index) in declarationColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </template>
          </simple-panel>
          <el-form style="margin-top:5px;" ref="introductionForm" :model="constructionRecord" :rules="constructionRules"
          label-position="right" label-width="150px" size="mini" status-icon>
            <el-row>
              <el-col :offset="5" :span="12">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目负责人" prop="xm">
                      <el-input v-model="teacherRecord.xm" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职称" prop="zc">
                      <el-input v-model="teacherRecord.zc" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="联系电话" prop="sj">
                  <el-input v-model="teacherRecord.sj" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目所在部门" prop="xymc">
                  <el-input v-model="teacherRecord.xymc" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目级别" prop="xmjb">
                  <el-select v-model="constructionRecord.xmjb" placeholder="请选择">
                    <el-option
                    v-for="item in xmjbData" :key="item.xmjb" :label="item.xmjb" :value="item.xmjb">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="立项和完成时间" prop="lxsj">
                  <el-date-picker style="width:100%;"
                    v-model="xmsj"
                    type="daterange"
                    format="yyyy年MM月"
                    value-format="timestamp"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer>
          <el-button @click="onIntroductionConfirm" type="primary" size="mini">确定</el-button>
          <el-button @click="onCloseClick" size="mini">取消</el-button>
        </el-footer>
      </el-container>
      <!-- 项目申报内容 -->
      <el-tabs style="height:98%;" v-else v-model="activePage" @tab-click="pageChanged">
        <!-- 基本情况 -->
        <el-tab-pane label="基本情况" name="basic">
          <!-- 项目简况 -->
          <el-form class="basic-form" ref="basicForm" :model="constructionRecord" :rules="constructionRules"
          label-position="right" label-width="150px" size="mini" status-icon>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称：" prop="xmmc">
                  <el-input v-model="constructionRecord.xmmc" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目类型：" prop="xmlx">
                   <el-input v-model="constructionRecord.xmlx" readonly></el-input>
                </el-form-item>
              </el-col> 
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目级别" prop="xmjb">
                  <el-select v-model="constructionRecord.xmjb" placeholder="请选择">
                    <el-option
                    v-for="item in xmjbData" :key="item.xmjb" :label="item.xmjb" :value="item.xmjb">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="立项和完成时间：" prop="lxsj">
                  <el-date-picker style="width:100%;" 
                    v-model="xmsj" 
                    type="daterange" 
                    format="yyyy年MM月" 
                    value-format="timestamp"
                    range-separator="至" 
                    start-placeholder="开始日期" 
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item> 
              </el-col>
            </el-row>
          </el-form>
          <!-- 项目成员 -->
          <simple-panel :panelTitle="'项目组主要成员'">
            <template slot="main">
              <el-table :data="memberData" stripe border size="medium" style="width: 100%;height:100%"
              highlight-current-row @current-change="onDeclarationChange">
                <template v-for="(col, index) in memberColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </template>
          </simple-panel>
        </el-tab-pane> 
        <!-- 建设目标和进度安排 -->
        <el-tab-pane label="建设目标和进度安排" name="target">
            <el-form ref="targetForm" :model="constructionRecord" :rules="constructionRules"
            label-position="top" size="mini" status-icon>
              <el-form-item label="建设目标:（描述总体目标任务）" prop="jsmb">
                <el-input type="textarea" v-model="constructionRecord.jsmb" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="进度安排:（分年度填写建设目标、任务和内容，以及其要求、完成时间、完成人分项列出）" prop="jdap">
                <el-input type="textarea" v-model="constructionRecord.jdap" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
            </el-form>
        </el-tab-pane> 
        <!-- 预期成果与成效 -->
        <el-tab-pane label="预期成果与成效" name="expection">
          <el-form ref="expectionForm" :model="constructionRecord" :rules="constructionRules"
            label-position="top" size="mini" status-icon>
            <el-form-item label="预期成果与成效:（具体填写建设项目的预期成果和成效，特别是预期标志性成果和取得的成效、效益）" prop="yqcgycx">
              <el-input type="textarea" v-model="constructionRecord.yqcgycx" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 保障条件与政策 -->
        <el-tab-pane label="保障条件与政策" name="condition">
          <el-form ref="conditionForm" :model="constructionRecord" :rules="constructionRules"
            label-position="top" size="mini" status-icon>
            <el-form-item label="保障条件与政策:（项目所在部门为项目建设所提供的硬件、软件方面的保障能力，以及为项目运行提供政策保障等）" prop="bztjyzc">
              <el-input type="textarea" v-model="constructionRecord.bztjyzc" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 项目经费规划 -->
        <el-tab-pane label="项目经费规划" name="budget">
          <simple-panel :panelTitle="'经费来源（总计）'">
            <template slot="main">
              <el-form class="budget-form" ref="budgetForm" :model="constructionRecord" :rules="constructionRules"
              label-position="right" label-width="120px" size="mini" status-icon>
                <el-row>
                  <el-col :md="12">
                    <el-form-item label="上级部门资助：" prop="sjbmzz">
                        <el-input v-model="constructionRecord.sjbmzz">
                          <template slot="prepend">￥</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12">
                    <el-form-item label="学校资助：" prop="xxzz">
                        <el-input v-model="constructionRecord.xxzz">
                          <template slot="prepend">￥</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :md="8">
                    <el-form-item label="院系配套：" prop="yxpt">
                      <el-input v-model="constructionRecord.yxpt">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :md="8">
                    <el-form-item label="自筹：" prop="zcjf">
                      <el-input v-model="constructionRecord.zcjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :md="8">
                    <el-form-item label="其他：" prop="qtjf">
                      <el-input v-model="constructionRecord.qtjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <h3>合计：￥{{jfhj}}</h3>
                </el-row>
              </el-form>
            </template>
          </simple-panel>
          <simple-panel :panelTitle="'经费支出规划（总计）'" :hasToolbar="true">
            <template slot="toolbar">
               <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" @click="onBudgetAdd('budget')">增加</el-button>
            </template>
            <template slot="main">
              <el-table :data="budgetData" stripe border size="medium" style="width: 100%;height:100%">
                <template v-for="(col, index) in budgetColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-button class="edit-btn" type="text" size="small" @click="onBudgetEdit(scope.row,'budget', $event)">修改</el-button>
                    <el-button class="delete-btn" type="text" size="small" @click="onBudgetDelete(scope.row,'budget', $event)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template> 
          </simple-panel>
        </el-tab-pane>
        <!-- 年度经费预算与规划 -->
        <el-tab-pane label="年度经费预算与规划" name="annualbudget">
          <!-- 用立项时间得出年数，然后自动产生若干个表 -->
          <el-row>
            <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" 
            @click="onAnnualBudgetAdd('budget')">增加年度预算</el-button>
            <el-button type="success" icon="el-icon-check" size="mini" style="margin:5px 0px;"
            @click="onAnnualBudgetSave('budget')">保存年度预算</el-button>
          </el-row>
          <template v-for="(ab, index) in annualBudgets">
            <annual-budget-card :key="index" :annualBudget="ab" @card-delete="onAnnualBudgetDelete('budget', $event)">
            </annual-budget-card>
          </template> 
          <el-row v-if="annualBudgets.length > 0">
            <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" 
            @click="onAnnualBudgetAdd('budget')">增加年度预算</el-button>
            <el-button type="success" icon="el-icon-check" size="mini" style="margin:5px 0px;"
            @click="onAnnualBudgetSave('budget')">保存年度预算</el-button>
          </el-row>
          
        </el-tab-pane>
        <!-- 责任人承诺和审核意见 -->
        <el-tab-pane label="责任人承诺和审核意见" name="promiseAndrecommendation">
          <simple-panel :panelTitle="'责任人承诺'">
            <template slot="main">
              <el-form ref="promiseForm" :model="constructionRecord" :rules="constructionRules"
              label-position="top" size="mini" status-icon>
                <el-form-item label="责任人承诺：" prop="zrrcnnr">
                  <el-input type="textarea" v-model="constructionRecord.zrrcnnr" :autosize="{minRows: 3, maxRows: 20}"></el-input>
                </el-form-item>
                <el-form-item label="责任人承诺日期：" prop="zrrcnshrq">
                  <el-date-picker style="width:100%;" v-model="constructionRecord.zrrcnshrq" type="date" value-format="timestamp" placeholder="请选择">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </template>
          </simple-panel>
          <simple-panel :panelTitle="'审核意见'">
            <template slot="main">
              <el-form ref="recommendationForm" :model="constructionRecord" :rules="constructionRules"
                label-position="top" size="mini" status-icon>
                <el-form-item label="项目所在部门审核意见：" prop="xmszbmshyj">
                  <el-input type="textarea" v-model="constructionRecord.xmszbmshyj" :autosize="{minRows: 3, maxRows: 20}"></el-input>
                </el-form-item>
                <el-form-item label="项目所在部门审核日期：" prop="xmszbmshrq">
                  <el-date-picker style="width:100%;" v-model="constructionRecord.xmszbmshrq" type="date" value-format="timestamp" placeholder="请选择">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="学校管理部门审核意见：" prop="xxglbmshyj">
                  <el-input type="textarea" v-model="constructionRecord.xxglbmshyj" :autosize="{minRows: 3, maxRows: 20}"></el-input>
                </el-form-item>
                <el-form-item label="学校管理部门审核日期：" prop="xxglbmshrq">
                  <el-date-picker style="width:100%;" v-model="constructionRecord.xxglbmshrq" type="date" value-format="timestamp" placeholder="请选择">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </template>
          </simple-panel>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <!-- 经费预算dlg -->
    <el-dialog title="经费预算明细" width="30%" :visible.sync="budgetDlgVisible">
      <el-form ref="budgetDetailForm" :model="budgetRecord" :rules="budgetRules"
      label-position="right" label-width="130px" size="mini" status-icon v-loading="budgetLoading">
        <el-form-item label="经费支出科目：" prop="jfzckm">
          <el-input v-model="budgetRecord.jfzckm"></el-input>
        </el-form-item>
        <el-form-item label="用途说明：" prop="ytsm">
          <el-input v-model="budgetRecord.ytsm"></el-input>
        </el-form-item>
        <el-form-item label="金额（元）：" prop="je">
          <!-- <el-input v-model="budgetRecord.je"></el-input> -->
          <el-input-number style="width:100%;" v-model="budgetRecord.je" :min="0" label="输入金额"></el-input-number>
        </el-form-item>
        <el-row>
          <el-button @click="onBudgetConfirm('budget')" type="primary" size="mini">确定</el-button>
          <el-button @click="budgetDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 
  </el-container>
</template>
<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer ,b, dateRenderer} from "@/utils/tableutils.js";
import AnnualBudgetCard from "@/components/srpds/AnnualBudgetCard";

//meta info
var budget   = "budget";

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var loadAttr = "Loading";

// 申报书的列
var declarationColumns =[
  {
    prop: "xmsbbh",
    label: "项目申报编号",
    outOfSearch:true,
    hidden: true
  },
  {
    prop: "xmmc",
    label: "项目名称"
  },
  {
    prop: "xmlx",
    label: "项目类型"
  },
  {
    prop: "jsbh",
    label: "项目主持人编号",
    outOfSearch:true,
    hidden:true
  },
  {
    prop: "xm",
    label: "项目主持人"
  },
  {
    prop:"zc",
    label:"职称"
  },
  {
    prop: "xybh",
    label: "项目所在部门编号",
    outOfSearch:true,
    hidden:true
  },
  {
    prop: "xymc",
    label: "项目所在部门"
  },
  {
    prop: "yjkssj",
    label: "研究开始时间",
    type:"date",
    renderer:dateRenderer
  },
  {
    prop: "yjjssj",
    label: "研究结束时间",
    type:"date",
    renderer:dateRenderer
  },
   {
    prop: "sqxxjf",
    label: "申请学校经费",
    type:"number",
    hidden:true
  },
  {
    prop: "ptxyjf",
    label: "配套学院经费",
    type:"number"
  },
  {
    prop: "ptqtjf",
    label: "配套其他经费",
    type:"number"
  },
  {
    prop: "zcjf",
    label: "自筹经费",
    type:"number"
  }
];

// 项目成员列
var memberColumns = [
  {
    prop: "xmzcybh",
    label: "项目组成员编号",
    hidden: true
  },
  {
    prop: "cyxh",
    label: "成员序号",// TODO 需要处理自增
    width:80,
    type:"myIndex"
  },
  {
    prop:"jsbh",
    label:"教师编号",
    hidden:true
  },
  {
    prop: "xm",
    label: "教师",
  }, 
  {
    prop: "gh",
    label: "工号"
  },
  {
    prop: "csrq",
    label: "出生日期",
    type:'date',
    renderer:dateRenderer,
    hidden:true
  },
  {
    prop: "csrqstr",
    label: "出生日期"
  },
  {
    prop: "zw",
    label: "专业技术职务"
  }, 
  {
    prop: "xmc",
    label: "系名称"
  }, 
  {
    prop: "xymc",
    label: "学院名称"
  },
  {
    prop: "xmfg",
    label: "项目分工",
    type:"textarea"
  }
];
 
// 预算支出明细
var budgetColumns =[
  {
    prop:"ysmxbh",
    label:"预算明细编号",
    hidden:true
  },
  {
    prop:"xh",
    label:"序号",
    width:60,
    type:"myIndex"
  },
  {
    prop:"jfzckm",
    label:"经费支出科目",
    width:200,
    type:"input"
  },
  {
    prop:"ytsm",
    label:"用途说明",
    type:"input"
  },
  {
    prop:"je",
    label:"金额",
    width:200,
    type:"number"
  }
];

export default {
  name:"ConForm",
  props: {
    formRecord: {
      type: Object
    },
    formRules: {
      type: Object
    }
  },
  components:{
    "simple-panel": SimplePanel,
    "table-panel": TablePanel,
    "dynamic-table": DynamicTable,
    "annual-budget-card":AnnualBudgetCard
  },
  computed:{
    jfhj:function(){//经费合计
      var me = this;
      var sjbmzz = parseFloat(me.constructionRecord.sjbmzz);
      var xxzz = parseFloat(me.constructionRecord.xxzz);
      var yxpt   = parseFloat(me.constructionRecord.yxpt);
      var zcjf = parseFloat(me.constructionRecord.zcjf);
      var qtjf = parseFloat(me.constructionRecord.qtjf);

      if(Number.isNaN(sjbmzz+xxzz+yxpt+zcjf+qtjf)){
        return 0;
      }else{
        return sjbmzz+xxzz+yxpt+zcjf+qtjf;
      }
      
    }, 
    budgetYears:function(){// 预算年
      var me = this;
      var start = new Date(me.constructionRecord.lxsj).getFullYear();
      var end = new Date(me.constructionRecord.jxsj).getFullYear(); 

      var years = [];
      for (let i = 0; i <= (start-end); i++) {
        years.push(start + i);
      }

      return years;

    },
    xmsj: {// 项目时间-立项时间，结项时间
      get: function () {
        return [this.constructionRecord.lxsj,this.constructionRecord.jxsj];
      },
      set: function (v) {
        this.constructionRecord.lxsj = v[0]
        this.constructionRecord.jxsj = v[1]
      }
    }
  },
  methods:{
    onSaveClick:function(){
      console.log("保存！！！");// TODO 这里需要保存一些信息，要理一下
      
    },
    onCloseClick:function() {// 关闭页面
      this.$emit("form-close");
      this.constructionRecord={};
      this.constructionRules={};
      this.teacherRecord={};
      this[budget + dataAttr] = [];
      this.annualBudgets = [];

    },
    onIntroductionConfirm:function() {// 基本情况确认
      var me = this;
      // 验证信息
      var ret;
      me.$refs.introductionForm.validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("表单信息有误");
        return;
      }
      console.log("第一次发送给后台=", me.constructionRecord);
      // 发送请求 提交之后，产生一个jsrwbh /static/data/construction.json
      me.postRequest("/jgxmjsJsjcxx", me.constructionRecord).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success("提交成功！");
          me.constructionRecord = resp.data; // 得到保存后的数据
          me.InitRecord();// 填写必要的字段
          // 通过xmsbbh加载项目成员 /static/data/members.json
          me.getRequest("/jgxmsbXmzcy",{
            xmsbbh:me.constructionRecord.xmsbbh
          }).then(resp=>{
            if (resp.status == 200 && resp.data.length > 0) {
              me.$message.success("提交成功！");
              me.memberData = resp.data;// 取到成员列表 
            } else {
              me.$message.error("服务器发生错误，加载项目成员失败，错误代码：" + resp.status);
            }
          });
        } else {
          me.$message.error("服务器发生错误，提交建设任务失败 ，错误代码：" + resp.status);
        }
      });

    },
    onDeclarationChange:function(row) {// 选中一个申报书
      var me = this;
      me.declarationSelected = row;
      console.log(row);
      me.constructionRecord.xmsbbh = row.xmsbbh;// 项目申报编号
      me.constructionRecord.jsbh = row.jsbh;// 项目主持人---项目负责人
      me.constructionRecord.xm = row.xm;// 姓名
      me.constructionRecord.zc = row.zc;// 职称
      me.constructionRecord.sj = row.sj;// 手机
      me.constructionRecord.xymc = row.xymc;// 项目所在部门，学院名称
      me.constructionRecord.xybh = row.xybh;// 学院编号
      me.constructionRecord.xmmc = row.xmmc;// 项目名称
      
      me.constructionRecord.lxsj = row.yjkssj;
      me.constructionRecord.jxsj = row.yjjssj;

      //补充申报书的项目负责人信息
      me.getRequest("/jcJsxxb", {
        jsbh:row.jsbh
      }).then(resp => {
        if(resp.status == 200) {
          if(resp.data.results.length == 1){
            me.teacherRecord = resp.data.results[0];
            me.constructionRecord.jsbh = me.teacherRecord.jsbh;// 连接外键
            me.constructionRecord.xybh = me.teacherRecord.xybh;// 连接外键

          }else{
            me.$message.error("未查询到项目负责人信息，请联系管理员解决！");
          }
        }
      });

    }, 
    pageChanged: function(tab, event) {//切换tab

    },
    onBudgetAdd:function(tname){// 预算-创建
      var me = this;
      me[tname + recordAttr] = formModelInitFromTable(
        me[tname + columnsAttr]
      );
      me[tname + recordAttr].sfqy = "1"; // 创建时，有效否是选中的
      me[tname + recordAttr].jsrwbh = me.constructionRecord.jsrwbh;//
      
      console.log(me.constructionRecord);
      console.log(me[tname + recordAttr]);
      me[tname + dlgVisibleAttr] = true;
    },
    onBudgetEdit:function(tname){// 预算-编辑
      var me = this;
      me[tname + recordAttr] = row;
      me[tname + dlgVisibleAttr] = true;
    },
    onBudgetDelete:function(tname){// 预算-删除
      let me = this;
      let key = "";
      let url = "";
      let glUrl = "";
      if(tname == budget){
        key="";
        url="";
      }

      // 删除记录
      if(key != ""){
        me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
        }).then(() => {
            me.deleteRequest(`/${url}/${row[key]}`).then((resp)=>{
              if(resp.status == 200) {
                me.$message.success("删除成功!");
              }else{
                me.$message.error('删除失败！');
              }
            });
        }).catch(() => {});
      }
    },
    onBudgetConfirm:function(tname){// 预算-确认
      var me = this;
      let record = {};
      let url = "";// 关联url
      let primaryKey = "";
      if(tname == budget){
        url="";
        primaryKey = "";
      } 
      me.$refs[tname + formAttr].validate(valid => {
        if (valid) {
          //  /static/data/testSuc.json
          me[tname+loadAttr] = true;
          me.postRequest("/"+url, me[tname+recordAttr]
          ).then(resp => {// 保存明细
            if (resp.status == 200) {
              me.$message.success("添加成功！");
              me[tname+loadAttr]  = false;
              me[tname + dlgVisibleAttr] = false;
              // 这里会重新返回一个带有编号的记录，把记录放进表格后面
              me[tname + dataAttr].push(me[tname + recordAttr]);
            } else {
              me[tname+loadAttr]  = false;
              me.$message.error("服务器出错，保存失败！");
            }
          })
        } else {
          me.$message.error("表单信息有误！");
        }
      });
    },
    onAnnualBudgetAdd:function(tname){// 年度预算-新增
      let me = this;
      //
      me.annualBudgets.push({
        nd:"",
        ndjfysbh:"",
        sjbmzzje:0,
        xxzzje:0,
        yxtr:0,
        zc:0,
        qt:0,
        budgets:[]
      });

    },
    onAnnualBudgetDelete:function(tname, budget){// 年度预算-删除
      let me = this;
      // TODO 按照budget信息删除
      me.$confirm("确定删除吗?", "提示", {
        type: "warning"
      }).then(() => {
          me.annualBudgets.splice(me.annualBudgets.indexOf(budget), 1)
      }).catch(() => {});
     

    },
    onAnnualBudgetSave:function(){// 年度预算-保存
      let me = this;
      // TODO 发送信息，保存一个年度计划

      me.postRequest("/保存年度计划",{
        //这里应该是带上一个建设任务编号，还有一大堆的年度信息，年度信息可能会有的有主键，有的没主键，然后每一个年度还有对应的一堆明细
      }).then(resp=>{
        if(resp.status == 200){
          console.log("保存成功")
        }
      });

    },
    InitRecord:function(){// 填写record中必要的字段
      var me = this;
      me.constructionRecord.zrrcnnr = "我作为项目负责人，保证按时按质组织完成任务书中的建设任务，达到预期目标，如不能完成（不可抗拒的因素除外），我愿意按学校的有关规定承担责任。";
    },
    init:function(){
      let me = this;
      // 申报书
      me.getRequest("/jgxmsbSbjcxx",{
        page:1,
        size:100000
        // TODO 还需要添加其他条件
      }).then(resp=>{
        if(resp.status == 200){
          me.declarationData = resp.data.results;
        }
      });

      // 项目级别
      me.getRequest("/static/json/xmjb.json",{}).then(resp=>{
        if(resp.status == 200){
          me.xmjbData = resp.data;
        }
      });

    }
  },
  data(){
    return {
      activePage:"basic",
      constructionRecord: {},
      constructionRules: {},
      teacherRecord:{},// 用来保存申请项目的教师信息
      declarationColumns:declarationColumns,// 申报
      declarationData:[],
      declarationSelected:{},
      memberColumns:memberColumns,// 项目成员
      memberData:[],
      [budget + columnsAttr]:budgetColumns,// 预算支出
      [budget + dataAttr]:[],
      [budget + recordAttr]:{},
      [budget + rulesAttr]:{},
      [budget + dlgVisibleAttr]: false,
      budgetLoading:false,
      annualBudgets:[],// 年度预算-以年为键
      xmjbData:[]
    }
  },
  created() {
    var me = this;
    me.constructionRules = me.formRules;// 冒泡进来
    me.constructionRecord = me.formRecord;// 冒泡进来

    me.init();

  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";

.construction-form{
  height: 100%; // 2018-06-11
  margin: 0 5px;

  .header {
    background-color: $--border-level-3;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;

    .title {
      font-size: 20px;
      color: $--color-primary;
    }
  }

  .main {
    height: 100%;
    margin: 0;
    padding: 0;
    
    .el-tabs__header{
      margin-bottom: 0;
    }


    .basic-form {
      margin-top: 5px;
    }

    .el-form-item label{
      float: left;
    }

    .budget-form{
      margin-top: 5px;
    }

    @media screen and (max-height: 768px){
     .el-tabs__content{
        height: 80%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

    @media screen and (min-height:768px) and (max-height: 875px){
     .el-tabs__content{
        height: 93%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

    @media screen and (min-height:875px) and (max-height: 992px){
     .el-tabs__content{
        height: 94%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

  }

}
</style>

